<template>
  <div class="h-full">
    <div class="h-full overflow-hidden key-word-list flex flex-col">
      <a-list size="small" :data-source="keyWordList" class="flex-1" :loading="keyWordLoading">
        <template #renderItem="{ item }">
          <a-list-item class="cursor-pointer hover:bg-gray-100 rounded" @click="onSelectKeyWord(item)">
            <div class="flex justify-between w-full items-center">
              <div>{{ item.content }}</div>
              <BaseButton danger type="text" confirm-text="是否删除？" @click.stop="onDeleteKeyWord(item)">删除</BaseButton>
            </div>
          </a-list-item>
        </template>
        <template #header>
          <div class="flex justify-between">
            <a-input-search v-model:value="searchKey" placeholder="请输入关键词" @search="getKeyWords" @change="getKeyWords" />
            <a-button type="primary" class="ml-2" ghost @click="isShowAddKeyWord = true">新增</a-button>
          </div>
        </template>
      </a-list>
    </div>
    <a-modal v-model:open="isShowAddKeyWord" centered title="新增关键词" @ok="onAddKeyWord" @cancel="isShowAddKeyWord = false">
      <a-form class="p-8">
        <a-form-item label="关键词">
          <a-input v-model:value="newKeyWord" placeholder="请输入关键词" />
        </a-form-item>
        <a-form-item label="顺序">
          <a-input-number v-model:value="orderKeyWord" class="w-full" placeholder="请输入顺序" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { debounce } from 'lodash-es'
import { message } from 'ant-design-vue'

const isShowAddKeyWord = ref(false)
const newKeyWord = ref('')
const orderKeyWord = ref(null)
const onAddKeyWord = async () => {
  if (!newKeyWord.value) return message.warning('请输入关键词')
  const { code, msg } = await post('/emr/emrCommonPhrases/doSaveEmrCommonPhrase', {
    content: newKeyWord.value,
    outOrder: orderKeyWord.value
  })
  if (code !== 0) return message.error(msg)
  message.success('新增成功')
  isShowAddKeyWord.value = false
  orderKeyWord.value = null
  newKeyWord.value = ''
  getKeyWords()
}
const onDeleteKeyWord = async (item) => {
  const { code, msg } = await post('/emr/emrCommonPhrases/doDelEmrCommonPhrase/' + item.id)
  if (code !== 0) return message.error(msg)
  message.success('删除成功')
  getKeyWords()
}
const searchKey = ref('')
const keyWordList = ref([])
const keyWordLoading = ref(true)
const getKeyWords = debounce(async () => {
  keyWordLoading.value = true
  const { code, msg, data } = await post('/emr/emrCommonPhrases/getEmrCommonPhrases', {
    keyword: searchKey.value
  })
  keyWordLoading.value = false
  if (code !== 0) return message.error(msg)
  keyWordList.value = data
}, 300)
const onSelectKeyWord = (item) => {
  const ctl = document.getElementById('myWriterControl')
  ctl.DCExecuteCommand('Spechars', false, item.content) //插入纯文本
}
onMounted(() => {
  getKeyWords()
})
</script>
<style lang="less" scoped>
.key-word-list {
  :deep(.ant-list) {
    overflow: hidden;
    .ant-spin-nested-loading {
      height: calc(100% - 49px);
      overflow-y: auto;
      .ant-spin-container,
      .ant-list-items {
        height: 100%;
        overflow-y: auto;
      }
    }
  }
}
</style>
